@class-prefix-tabs: ~'bui-tabs';

.@{class-prefix-tabs} {
  --height: var(--bui-tabs-height, 39px);
  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
  --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));

  /* prettier-ignore */
  --line-height: var(--bui-tabs-line-height, 3PX);
  --line-width: var(--bui-tabs-line-width, 18px);
  --mask-width: var(--bui-tabs-mask-width, 12px);
  --mask-height: var(--bui-tabs-mask-height, 100%);
  --tab-height: var(--bui-tab-height, 100%);
  --tab-padding: var(
    --bui-tab-padding,
    var(--bui-spacing-lg) var(--bui-spacing-lg) 10px
  );
  --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));

  position: relative;
  font-family: var(--bui-font-family);

  &-tabs {
    height: var(--height);
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow-x: scroll;

    &::-webkit-scrollbar {
      display: none;
    }
    scrollbar-width: none;
  }

  &-tabline {
    position: absolute;
    width: var(--line-width);
    bottom: 0;

    height: var(--line-height);
    color: var(--bui-color-primary);
    background: var(--line-color);
    border-radius: var(--bui-shape-radius-label);
  }

  &-content {
    padding: var(--bui-spacing-lg);
  }

  &-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--mask-width);
    height: var(--mask-height);
    pointer-events: none;
  }

  &-mask-left {
    left: 0;
    background: linear-gradient(
      to right,
      var(--bui-color-bg-view),
      rgba(255, 255, 255, 0)
    );
  }

  &-mask-right {
    right: 0;
    background: linear-gradient(
      to left,
      var(--bui-color-bg-view),
      rgba(255, 255, 255, 0)
    );
  }
}

.bui-tabline-invisible {
  visibility: hidden;
  background-color: transparent;
}
